<template>
	<view>
		<!-- 顶部头像-干饭日记显示区域 -->
		<view class="top-container">
			<u-avatar :src="user.avatar || ''" shape="square" size="52"></u-avatar>
			<view class="info">
				<!-- 给<view>标签设置open-type="getUserInfo"属性非常必要。 -->
				<!-- 因为该标签绑定了点击事件，当我们点击标签的时候，微信会弹出授权弹窗。 -->
				<!-- 如果用户同意授权，我们就能用JS语句获取到用户的微信资料和临时授权码。 -->
				<!-- 毕竟我们注册新用户的时候需要用到微信昵称、头像和性别。 -->
				<!-- 小程序中的点击事件叫tap -->
				<view v-if="flag == 'logout'" open-type="getUserInfo" @tap="loginOrRegister">
					<text class="operate">注册 / 登陆</text>
					<text class="remark">请登陆膳逸小程序</text>
				</view>
				<view v-if="flag == 'login'">
					<text class="username">{{ user.username }}  的干饭日记</text>
					<u-row>
						<u-col><text class="phone">已经连续打卡 6 天</text></u-col>
					</u-row>
					
				</view>
			</view>
			<view>
				<u-icon name="edit-pen" color="#e6e6e6" size="38"></u-icon>
			</view>
			<view>
				<u-icon name="calendar" color="#e6e6e6" size="38"></u-icon>
			</view>
		</view>
		<!-- 我的饭友 -->
		<view class="navigator-container">
			<u-cell-group>
				<u-cell icon="account-fill" title="我的饭友" :isLink="true" arrow-direction="right"></u-cell>
			</u-cell-group>
		</view>
		<view class="publicity-container">
		    <view>
		        <text class="dairyDate">2024年4月25日 17:52</text>
		    </view>
		    <view>
		        <text class="dairyText">今天打卡了一家宝藏餐厅！</text>
		    </view>
			<!-- 这里显示图片 -->
			<view>
				<image class="showPicture" src="https://th.bing.com/th/id/R.b80ce6ebd0c45ddcccf9afc1e331c403?rik=mnvvI3IFXe3T2g&pid=ImgRaw&r=0" mode="widthFix"></image>
			</view>
			<view style="margin: 20rpx 5rpx 20rpx 5rpx">
				<u-line color="#717171"></u-line>
			</view>
			
			<view>
				<text>智能分析</text>
			</view>
			<view>
				<view class="container">
				    <!-- 左列图片 -->
				    <view class="left-column">
				        <image src="../../static/picture/u274.png" mode="aspectFill" class="left-image"></image>
				    </view>
				
				    <!-- 右列表格 -->
				    <view class="right-column">
				        <scroll-view scroll-y style="height: 100%;">
				            <view class="table">
				                <view class="row">
				                    <text class="cell">行1 列1</text>
				                    <text class="cell">行1 列2</text>
				                </view>
				                <view class="row">
				                    <text class="cell">行2 列1</text>
				                    <text class="cell">行2 列2</text>
				                </view>
				                <!-- 其他行类似 -->
				            </view>
				        </scroll-view>
				    </view>
				</view>

			</view>
			<!-- <view class="grid-container">
			    <block wx:if="{{imageList.length == 1}}">
			        <image src="{{imageList[0]}}" class="single-image"></image>
			    </block>
			    <block wx:elif="{{imageList.length == 2}}">
			        <view class="grid-2x1">
			            <image src="{{imageList[0]}}" class="grid-item"></image>
			            <image src="{{imageList[1]}}" class="grid-item"></image>
			        </view>
			    </block>
			    <block wx:elif="{{imageList.length == 4}}">
			        <view class="grid-2x2">
			            <image src="{{imageList[0]}}" class="grid-item"></image>
			            <image src="{{imageList[1]}}" class="grid-item"></image>
			            <image src="{{imageList[2]}}" class="grid-item"></image>
			            <image src="{{imageList[3]}}" class="grid-item"></image>
			        </view>
			    </block>
			    <block wx:else>
			        <view class="grid-3x3">
			            <block wx:for="{{imageList}}" wx:for-item="image">
			                <image src="{{image}}" class="grid-item"></image>
			            </block>
			        </view>
			    </block>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: {
				'mine-icon-1': `${this.shanyiUrl}/page/mine/mine-icon-1.png`,
				'mine-icon-2': `${this.shanyiUrl}/page/mine/mine-icon-2.png`,
				'mine-icon-3': `${this.shanyiUrl}/page/mine/mine-icon-3.png`,
				'mine-icon-4': `${this.shanyiUrl}/page/mine/mine-icon-4.png`,
				'mine-icon-5': `${this.shanyiUrl}/page/mine/mine-icon-5.png`,
				'service-icon-1': `${this.shanyiUrl}/page/mine/service-icon-1.png`,
				'service-icon-2': `${this.shanyiUrl}/page/mine/service-icon-2.png`,
				'service-icon-3': `${this.shanyiUrl}/page/mine/service-icon-3.png`,
				'service-icon-4': `${this.shanyiUrl}/page/mine/service-icon-4.png`,
				'service-icon-5': `${this.shanyiUrl}/page/mine/service-icon-5.png`,
				'service-icon-6': `${this.shanyiUrl}/page/mine/service-icon-6.png`,
				'service-icon-7': `${this.shanyiUrl}/page/mine/service-icon-7.png`,
				'service-icon-8': `${this.shanyiUrl}/page/mine/service-icon-8.png`,
				'service-icon-9': `${this.shanyiUrl}/page/mine/service-icon-9.png`,
				'service-icon-10': `${this.shanyiUrl}/page/mine/service-icon-10.png`,
				'service-icon-11': `${this.shanyiUrl}/page/mine/service-icon-11.png`,
				'service-icon-12': `${this.shanyiUrl}/page/mine/service-icon-12.png`,
				'service-icon-13': `${this.shanyiUrl}/page/mine/service-icon-13.png`,
				'service-icon-14': `${this.shanyiUrl}/page/mine/service-icon-14.png`,
				'service-icon-15': `${this.shanyiUrl}/page/mine/service-icon-15.png`
			},
			flag: 'logout',
			code: null,
			user: {
				username: '',
				avatar: null,
				phone: null
			},
			bannerUrl: `${this.shanyiUrl}/banner/banner-5.jpg`,
			publicityBannerUrl: `${this.shanyiUrl}/banner/banner-2.jpg`,
			otherBannerUrl: `${this.shanyiUrl}/banner/banner-1.jpg`,
			adBannerUrl: [`${this.shanyiUrl}/banner/banner-8.jpg`, `${this.shanyiUrl}/banner/banner-5.jpg`]
		};
	},
	methods: {
		// 注册或登录
		loginOrRegister: function() {
			let that = this;
			console.log('loginOrRegister');
			console.log(that.api.loginOrRegister);
			// 获取微信用户的临时授权码
			// 调用uni中的内置方法login，传入provider和success回调函数
			// resp中的code就是临时授权码
			uni.login({
				provider: 'weixin',
				success: function(resp) {
					console.log(resp.code);
					that.code = resp.code;
				}
			});
			
			console.log("a");
			
			// 获取微信用户的资料，用于注册
			uni.getUserProfile({
				desc: '获取用户信息',
				success: function(resp) {
					console.log("b");
					let info = resp.userInfo;
					let nickName = info.nickName;
					let avatar = info.avatarUrl;
					let sex = info.gender == 0 ? '男' : '女';
					let data = {
						code: that.code,
						nickName,
						avatar,
						sex
					};
					console.log(data);
					
					console.log(that);
					
					// 提交Ajax请求，执行登录或注册
					that.ajax(that.api.loginOrRegister, 'POST', data, function(resp) {
						console.log(that.api.loginOrRegister);
						let msg = resp.data.msg;
						// console.log(that);
						// console.log(that.$refs);
						that.$refs.uToast.show({
							message: msg,
							type: 'success',
							duration: 1200,
							complete: function() {
								console.log("c");
								
								let token = resp.data.token;
								// 把Token保存到本地存储Storage中
								uni.setStorageSync('token', token);
								// 更新页面标志位变量
								that.flag = 'login';
								// 更新用户信息
								that.user.username = nickName;
								that.user.avatar = avatar;
								// 如果用户创建了个人信息，就把电话显示在页面上
								if (resp.data.hasOwnProperty('phone')) {
									that.user.phone = resp.data.phone;
								}
								console.log(resp.data);
							}
						});
					});
					
					console.log("d");
					
				}
			});
		},
		
		// 导航栏点击事件
		navigatorHandle: function(name) {
			let token = uni.getStorageSync('token');
			console.log(token);
			// 跳转到别的页面之前，先判断一下用户是否登录
			if (token == null || token.length == 0) {
				uni.showToast({
					icon: 'error',
					title: '请先登录'
				});
				return;
			}
			
			// 跳转到别的页面
			let url = null;
			if (name == '个人信息') {
				url = '/user/fill_user_info/fill_user_info';
			}
			
			// TODO: 其他判断条件
			
			
			uni.navigateTo({
				url
			});
		},
			
		
	},
	onShow: function() {
		let that = this;
		let token = uni.getStorageSync('token');
		if (token != null) {
			that.ajax(that.api.searchUserSimpleInfoById, 'GET', {}, function(resp) {
				if (resp.data.hasOwnProperty('result')) {
					that.flag = 'login';
					let result = resp.data.result;
					that.user.username = result.nick_name;
					that.user.avatar = result.avatar;
					that.user.phone = result.phone;
				}
			}, false);
		}
	}
};
</script>

<style lang="less">
@import url(check_in.less);
</style>
